.contrast-content {
    padding-top: 15px;

    .table-data {
        margin-top: 20px;

        .title {
            margin-bottom: 4px;
        }
    }

    .color1-dark {
        .apipost-table-th {
            background-color: var(--theme-color);
        }
    }

    .color1-white {
        .apipost-table-th {
            background-color: var(--theme-color);
            ;
        }
    }

    .color2-dark {
        .apipost-table-th {
            background-color: var(--sub-color-1);
        }
    }

    .color2-white {
        .apipost-table-th {
            background-color: var(--sub-color-1);
            ;
        }
    }

    .color3-dark {
        .apipost-table-th {
            background-color: #743DE5;
        }
    }

    .color3-white {
        .apipost-table-th {
            background-color: #743DE5;
            ;
        }
    }

    .color4-dark {
        .apipost-table-th {
            background-color: #C34D5B;
        }
    }

    .color4-white {
        .apipost-table-th {
            background-color: #CF515E;
        }
    }

    .table-data {
        .apipost-table-th {
            .apipost-table-cell {
                color: #fff;
            }
        }
    }

    .echart-list {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        justify-content: space-between;

        .echart-title {
            display: flex;
            justify-content: space-between;
            width: 100%;
            z-index: 999;

            .echart-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 22vw;

                .title-item {
                    width: 100%;
                    height: 85px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    color: var(--font-1);
                    font-size: 16px;

                    p:first-child {
                        max-width: 15vw;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    p:last-child {
                        margin-top: 2px;
                    }
                }

                .item-1-dark {
                    background: radial-gradient(195.88% 195.88% at 50% -95.88%, #4052EC 38.02%, rgba(26, 26, 29, 0) 100%);
                    border-radius: 30px 30px 0px 0px;
                }

                .item-2-dark {
                    background: radial-gradient(197.06% 197.06% at 50% -97.06%, #4CCB7E 34.37%, rgba(26, 26, 29, 0) 100%);
                    border-radius: 30px 30px 0px 0px;
                }

                .item-3-dark {
                    background: radial-gradient(197.06% 197.06% at 50% -97.06%, #7B40F2 34.37%, rgba(26, 26, 29, 0) 100%);
                    border-radius: 30px 30px 0px 0px;
                }

                .item-4-dark {
                    background: radial-gradient(198.82% 198.82% at 50% -98.82%, #CF515E 35.94%, rgba(26, 26, 29, 0) 100%);
                    border-radius: 30px 30px 0px 0px;
                }

                .item-1-white {
                    background: radial-gradient(195.88% 195.88% at 50% -95.88%, #4052EC 38.02%, rgba(255, 255, 255, 0) 100%);
                    border-radius: 30px 30px 0px 0px;
                }

                .item-2-white {
                    background: radial-gradient(197.06% 197.06% at 50% -97.06%, #4CCB7E 34.37%, rgba(255, 255, 255, 0) 100%);
                    border-radius: 30px 30px 0px 0px;
                }

                .item-3-white {
                    background: radial-gradient(197.06% 197.06% at 50% -97.06%, #7B40F2 34.37%, rgba(255, 255, 255, 0) 100%);
                    border-radius: 30px 30px 0px 0px;
                }

                .item-4-white {
                    background: radial-gradient(198.82% 198.82% at 50% -98.82%, #CF515E 35.94%, rgba(255, 255, 255, 0) 100%);
                    border-radius: 30px 30px 0px 0px;
                }
            }
        }

        .echart-container {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;

            &-item {
                display: flex;
                flex-direction: column;
                width: 22vw;

                .echart {
                    width: 100%;
                    min-height: 294px;
                }
            }

            &-two {
                display: flex;
                flex-wrap: wrap;

                .echart {
                    width: 50%;
                    min-height: 294px;
                }
            }
        }
    }


    .arco-table-container {
        border-color: var(--border-line);
    }


    .arco-table-tr {

        .arco-table-th {
            background-color: var(--bg);
            border-color: var(--border-line);
        }

        .arco-table-checkbox {
            .arco-table-th-item {
                margin-left: 0;
                padding-left: 0 !important;
            }
        }

        .arco-checkbox-indeterminate {
            .arco-checkbox-mask {
                background-color: var(--sub-color-1);
            }
        }

        .arco-checkbox-checked {
            .arco-checkbox-mask {
                background-color: var(--sub-color-1);
            }
        }

        .arco-table-td {
            background-color: var(--module);
            border-color: var(--border-line);
        }
    }


    .arco-table-border .arco-table-container::before {
        border-color: var(--border-line);
        background-color: var(--border-line);
    }
}